<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../jquery-1.8.3.min.js"></script>
    <style>
        #container{
            width: 400px;
            height: 250px;
            border:1px solid #000;
        }
        #box{
            width: 400px;
            height: 250px;
        }
        #box img{
            width: 400px;
            height: 250px;
        }
    </style> 
</head>
<body>
    <h1>JQ 动画</h1>
    <button id="hideBtn">隐藏</button>
    <button id="showBtn">显示</button>
    <button id="toggleBtn">显示/隐藏</button>
    <button id="fadetoBtn">指定透明度</button>
    <button id="animateBtn">animate</button>
    <button id="stopBtn">停止动画</button>
    <button id="delayBtn">延时/延迟</button>
    <hr>
    <div id="container">
        <div id="box">
            <img src="../imgs/Meinv009.jpg">
        </div>
    </div>

    <script>
        $('#hideBtn').click(function(){
            // $('#box').hide();
            // $('#box').hide('slow');
            // $('#box').hide(5000);// 宽高透明度
            // $('#box').slideUp(5000);//高
            $('#box').fadeOut(5000);//透明度
        });
        $('#showBtn').click(function(){
            // $('#box').show();
            // $('#box').show(5000);// 宽高透明度
            // $('#box').slideDown(5000);// 高度
            $('#box').fadeIn(5000);// 透明度
        });
        // 显示/隐藏
        $('#toggleBtn').click(function(){
            // $('#box').toggle();
            // $('#box').toggle(2000);// 高宽透明度
            // $('#box').slideToggle(5000);// 高
            $('#box').fadeToggle(3000); // 透明度
        });

        $('#box').toggle(
            function(){console.log(1);},
            function(){console.log(2);},
            function(){console.log(3);},
            function(){console.log(4);}
            );
        // 指定透明度'
        $('#fadetoBtn').click(function(){
            $('#box').fadeTo(3000, 0.3333);
        });
        // 自定义动画
        $('#animateBtn').click(function(){
            $('#box img').animate({
                'width':'1200px',
                'height': '600px'
            }, 3000);
        });
        // 停止动画
        $('#stopBtn').click(function (){
            $('#box').stop();
        });
        $('#delayBtn').click(function (){
            $('#box').hide(1000).delay(3000).show(1000);
        });
    </script>
</body>
</html>